<template>
  <div>
      <ul >
        <li v-for='v in carData' :key = 'v.id'>
                <van-card
                    :num="v.num"
                    :price="v.price"
                    :desc="v.title"
                    :title="v.name"
                    thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                >
                    <template #footer>
                    <van-button size="mini" @click="$store.commit({type:'sub_product',id:v.id})">-</van-button>
                    <van-button size="mini" @click="$store.commit({type:'add_product',id:v.id})">+</van-button>
                  </template>
                </van-card>   
                    
        </li>   
    </ul>
    <p>
        <span>总数量:{{sum_num}}</span>
        <span>总价格:{{sum_price}}</span>
    </p>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
    computed:{
        ...mapState(['carData']),
        ...mapGetters(['sum_num','sum_price'])
    }
}
</script>

<style>

</style>